<template>
  <view class="check-record-form">
    <uni-section title="添加巡检记录" type="line">
      <view class="form-body">
        <uni-forms @submit="submit" ref="form" :model="form" labelWidth="80px">
          <uni-forms-item label="检查项目" required>
            <button type="primary" size="mini" @click="showDrawer('showRight')"><text class="word-btn-white">选择检查项目</text></button>
            <uni-drawer ref="showRight" mode="right" :mask-click="false">
              <view class="planItem-view">
                <view class="close">
                  <button @click="closeDrawer('showRight')"><text class="word-btn-white">关闭</text></button>
                </view>
                <uni-search-bar @confirm="searchCheckItem" :focus="true" @input="queryCheckItem" />
                <uni-data-select label="检查范围" :localdata="checkScopeDatas" @change="selectCheckScope"></uni-data-select>
                <uni-data-select label="检查内容" :localdata="checkContentDict" @change="selectCheckContent"></uni-data-select>
                <!-- 检查项，checkItemDatas为列表，id字段为id，显示字段为checkItem，note字段为refDoc -->
                <scroll-view scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
                  <uni-list v-if="checkItemDatas">
                      <view class="info-content" v-for="(item, index) in checkItemDatas">
                        <uni-list-item :title="item.checkItem" :note="item.refDoc" @click="selectCheckItem(item)" />
                      </view>
                  </uni-list>
                </scroll-view>
              </view>
            </uni-drawer>
					</uni-forms-item>
          
        </uni-forms>
      </view>
    </uni-section>
  </view>
</template>

<script setup>
import { getDictDatas } from '@/api/system/dict/data';
import { addCheckRecord } from '@/api/task/record';
import { queryCheckItems } from '@/api/base/checkitem';

export default {
    data() {
        return {
          checkScopeDatas:[],
          checkContentDatas:[],
          checkContentDict:[],
          checkItemDatas: [],
          checkScope: '',
          checkContent: '',
          queryCheckItem: '',
          form: {
            actionId: '',
            actionStatus: '',
            planItem: '',
            itemPhotoBefore: '',
            itemQuestion: '',
            itemAction: ''
          }
        };
    },
    onLoad(options) {
        this.form.actionId = options.actionId;
        this.loadDictData();
    },
    methods: {
        async loadDictData() {
            getDictDatas('sg_check_scope').then(res => {
              let data = res.rows;
              this.checkScopeDatas = data.map(item => {
                item.text = item.dictLabel;
                item.value = item.dictValue;
                return item;
              });
            });
            getDictDatas('sg_check_content').then(res => {
                let data = res.rows;
                this.checkContentDatas = data.map(item => {
                  item.text = item.dictLabel;
                  item.value = item.dictValue;
                  return item;
                });
            });
        },
        formatDictData(dict, value) {
            if (!dict || !value) return '';
            return dict.find(item => item.dictValue === value).dictLabel;
        },
        showDrawer(e) {
          this.$refs[e].open()
        },
        // 关闭窗口
        closeDrawer(e) {
          this.$refs[e].close()
        },
        selectCheckScope(value) {
          this.checkContentDict = this.checkContentDatas.filter(item => item.dictValue.startsWith(value+'_'));
        },
        selectCheckContent(value) {
          queryCheckItems(value).then(res => {
            this.checkItemDatas = res.rows;
            console.log(this.checkItemDatas);
          })
        },

        selectCheckItem(item) {
          console.log(item);
        },
        searchCheckItem(e) {
          this.planItemQuery = e.detail.value;
        },
        // 抽屉状态发生变化触发
        change(e, type) {
          console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
          this[type] = e
        }
    }
};
</script>
<style lang="scss">
	.form-body {
		padding: 15px;
		background-color: #fff;
	}

  // 处理抽屉内容滚动
	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
</style>